<script setup>
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'

const cameraSettings = ref({
  // 基础参数
  resolution: '1920x1080',
  fps: 30,
  exposure: 100,
  gain: 50,
  
  // 图像参数
  brightness: 50,
  contrast: 50,
  saturation: 50,
  sharpness: 50,
  gamma: 1.0,
  
  // 高级参数
  triggerMode: 'continuous',
  triggerSource: 'software',
  triggerDelay: 0,
  acquisitionMode: 'continuous',
  
  // 白平衡参数
  whiteBalance: 'auto',
  redGain: 50,
  greenGain: 50,
  blueGain: 50,
  
  // ROI设置
  roiEnabled: false,
  roiX: 0,
  roiY: 0,
  roiWidth: 1920,
  roiHeight: 1080
})

// 触发模式选项
const triggerModes = [
  { label: '连续采集', value: 'continuous' },
  { label: '软触发', value: 'software' },
  { label: '硬触发', value: 'hardware' }
]

// 白平衡模式选项
const whiteBalanceModes = [
  { label: '自动', value: 'auto' },
  { label: '手动', value: 'manual' },
  { label: '一次性', value: 'once' }
]

const saveSettings = () => {
  Message.success('相机参数保存成功')
}

const resetSettings = () => {
  // 重置为默认值
  cameraSettings.value = {
    resolution: '1920x1080',
    fps: 30,
    exposure: 100,
    gain: 50,
    brightness: 50,
    contrast: 50,
    saturation: 50,
    sharpness: 50,
    gamma: 1.0,
    triggerMode: 'continuous',
    triggerSource: 'software',
    triggerDelay: 0,
    acquisitionMode: 'continuous',
    whiteBalance: 'auto',
    redGain: 50,
    greenGain: 50,
    blueGain: 50,
    roiEnabled: false,
    roiX: 0,
    roiY: 0,
    roiWidth: 1920,
    roiHeight: 1080
  }
  Message.success('参数已重置为默认值')
}
</script>

<template>
  <div class="setting-container">
    <a-row :gutter="16">
      <!-- 基础参数卡片 -->
      <a-col :span="12">
        <a-card class="setting-card">
          <template #title>
            <a-space>
              <icon-camera />
              基础参数
            </a-space>
          </template>
          <a-form :model="cameraSettings" layout="vertical">
            <a-form-item label="分辨率">
              <a-select v-model="cameraSettings.resolution">
                <a-option value="1920x1080">1920 x 1080</a-option>
                <a-option value="1280x720">1280 x 720</a-option>
                <a-option value="800x600">800 x 600</a-option>
                <a-option value="640x480">640 x 480</a-option>
              </a-select>
            </a-form-item>
            <a-form-item label="帧率 (fps)">
              <a-input-number v-model="cameraSettings.fps" :min="1" :max="120" />
            </a-form-item>
            <a-form-item label="曝光时间 (μs)">
              <a-input-number v-model="cameraSettings.exposure" :min="1" :max="1000000" :step="100" />
            </a-form-item>
            <a-form-item label="增益 (dB)">
              <a-slider v-model="cameraSettings.gain" :min="0" :max="24" :step="0.1" show-ticks />
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>

      <!-- 图像参数卡片 -->
      <a-col :span="12">
        <a-card class="setting-card">
          <template #title>
            <a-space>
              <icon-image />
              图像参数
            </a-space>
          </template>
          <a-form :model="cameraSettings" layout="vertical">
            <a-form-item label="亮度">
              <a-slider v-model="cameraSettings.brightness" :min="0" :max="100" show-ticks />
            </a-form-item>
            <a-form-item label="对比度">
              <a-slider v-model="cameraSettings.contrast" :min="0" :max="100" show-ticks />
            </a-form-item>
            <a-form-item label="饱和度">
              <a-slider v-model="cameraSettings.saturation" :min="0" :max="100" show-ticks />
            </a-form-item>
            <a-form-item label="锐度">
              <a-slider v-model="cameraSettings.sharpness" :min="0" :max="100" show-ticks />
            </a-form-item>
            <a-form-item label="伽马值">
              <a-slider v-model="cameraSettings.gamma" :min="0.1" :max="4" :step="0.1" show-ticks />
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>

      <!-- 高级参数卡片 -->
      <a-col :span="12">
        <a-card class="setting-card">
          <template #title>
            <a-space>
              <icon-settings />
              高级参数
            </a-space>
          </template>
          <a-form :model="cameraSettings" layout="vertical">
            <a-form-item label="触发模式">
              <a-select v-model="cameraSettings.triggerMode">
                <a-option v-for="mode in triggerModes" :key="mode.value" :value="mode.value">
                  {{ mode.label }}
                </a-option>
              </a-select>
            </a-form-item>
            <a-form-item label="触发源" v-if="cameraSettings.triggerMode !== 'continuous'">
              <a-radio-group v-model="cameraSettings.triggerSource">
                <a-radio value="software">软件触发</a-radio>
                <a-radio value="line0">Line 0</a-radio>
                <a-radio value="line1">Line 1</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="触发延迟 (μs)" v-if="cameraSettings.triggerMode !== 'continuous'">
              <a-input-number v-model="cameraSettings.triggerDelay" :min="0" :max="1000000" />
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>

      <!-- 白平衡参数卡片 -->
      <a-col :span="12">
        <a-card class="setting-card">
          <template #title>
            <a-space>
              <icon-sun />
              白平衡设置
            </a-space>
          </template>
          <a-form :model="cameraSettings" layout="vertical">
            <a-form-item label="白平衡模式">
              <a-select v-model="cameraSettings.whiteBalance">
                <a-option v-for="mode in whiteBalanceModes" :key="mode.value" :value="mode.value">
                  {{ mode.label }}
                </a-option>
              </a-select>
            </a-form-item>
            <template v-if="cameraSettings.whiteBalance === 'manual'">
              <a-form-item label="红色增益">
                <a-slider v-model="cameraSettings.redGain" :min="0" :max="100" show-ticks />
              </a-form-item>
              <a-form-item label="绿色增益">
                <a-slider v-model="cameraSettings.greenGain" :min="0" :max="100" show-ticks />
              </a-form-item>
              <a-form-item label="蓝色增益">
                <a-slider v-model="cameraSettings.blueGain" :min="0" :max="100" show-ticks />
              </a-form-item>
            </template>
          </a-form>
        </a-card>
      </a-col>

      <!-- ROI设置卡片 -->
      <a-col :span="24">
        <a-card class="setting-card">
          <template #title>
            <a-space>
              <icon-crop />
              ROI设置
            </a-space>
          </template>
          <a-form :model="cameraSettings" layout="vertical">
            <a-row :gutter="16">
              <a-col :span="6">
                <a-form-item label="启用ROI">
                  <a-switch v-model="cameraSettings.roiEnabled" />
                </a-form-item>
              </a-col>
              <template v-if="cameraSettings.roiEnabled">
                <a-col :span="6">
                  <a-form-item label="X偏移">
                    <a-input-number v-model="cameraSettings.roiX" :min="0" :max="1920" />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="Y偏移">
                    <a-input-number v-model="cameraSettings.roiY" :min="0" :max="1080" />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="宽度">
                    <a-input-number v-model="cameraSettings.roiWidth" :min="32" :max="1920" />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="高度">
                    <a-input-number v-model="cameraSettings.roiHeight" :min="32" :max="1080" />
                  </a-form-item>
                </a-col>
              </template>
            </a-row>
          </a-form>
        </a-card>
      </a-col>
    </a-row>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <a-space>
        <a-button type="primary" @click="saveSettings">
          <template #icon><icon-save /></template>
          保存设置
        </a-button>
        <a-button @click="resetSettings">
          <template #icon><icon-refresh /></template>
          重置默认
        </a-button>
      </a-space>
    </div>
  </div>
</template>

<style scoped>
.setting-container {
  height: 100%;
  padding: 16px;
  overflow-y: auto;
}

.setting-card {
  margin-bottom: 16px;
}

.setting-card :deep(.arco-card-header) {
  border-bottom: 1px solid var(--color-border-2);
}

.action-buttons {
  position: sticky;
  bottom: 0;
  background: var(--color-bg-2);
  padding: 16px 0;
  text-align: center;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .setting-container {
    padding: 8px;
  }
  
  .action-buttons {
    padding: 12px 0;
  }
}
</style>
